<template>
	<div class = "product-detail-container" v-if = "product">
		<div class = "product-images">
			<img :src = "product.picPath" alt = "Product Detail Image" class = "main-image" />
		</div>
		<div class = "product-info">
			<div class = "info-content">
				<h1>{{ product.title }}</h1>
				<p><strong>产地:</strong> {{ product.procity }}</p>
				<p><strong>价格:</strong> ¥{{ product.price }}</p>
				<p><strong>真实销量:</strong> {{ product.realSales }}</p>
			</div>

			<vue-danmaku ref = "danmakuRef" v-model:danmus = "reviews" useSlot
						 :random-channel = "true"
						 :top = "50 * Math.random()"
						 :right = "300 * Math.random()"
						 :channels = "5"
						 :speeds = "150"
						 :debounce = "700 * Math.random()"
						 style = "width: 50vw; height: 30vh; margin-top: 40px;">
				<template v-slot:dm = "{ index, danmu }">
          <span
			  class = "custom-danmaku-item">{{
				  danmu.userId && danmu.userId === currentUserId ? userStore.user.username : (!danmu.userId ? '未知用户' : danmu.userId)
			  }}：{{
				  danmu.comment
			  }}</span>
				</template>
			</vue-danmaku>

			<div class = "comments-section">
				<h2>用户评论</h2>
				<form @submit.prevent = "addComment">
					<textarea v-model = "newCommentContent" placeholder = "输入您的评论..."></textarea>
					<el-button type = "success" native-type = "submit" v-loading = "loading">提交评论</el-button>
				</form>
			</div>
		</div>

	</div>
	<div v-else class = "loading">
		<p>Loading...</p>
	</div>

</template>

<script lang = "ts" setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import vueDanmaku from 'vue3-danmaku'
import Api from '@/api'
import simpleRequest from '@/utils/requestUtils'
import useStore from '@/store'

const { userStore } = useStore()
const currentUserId = userStore.user.id

const loading = ref(false)

//* 商品接口
interface Product {
	id: string;
	title: string;
	procity: string;
	price: number;
	realSales: string;
	picPath: string;
}

//* 评论接口
interface Review {
	id: string,
	productId: string,
	userId: string | '匿名用户',
	comment: string
}

//* 评论列表
const reviews = ref<Review[]>([])

//* 路由配置
const route = useRoute()

//* 商品信息
const product = ref<Product | null>(null)

//* 当前商品ID
const currentProductId = route.params.id as string

//* 弹幕ref
const danmakuRef = ref(null)

//* 新评论ref
const newCommentContent = ref('')

//* 添加评论
const addComment = () => {
	loading.value = true
	simpleRequest(Api.createReview, { productId: currentProductId, userId: currentUserId, comment: newCommentContent.value } as Review, _ => {
		fetchReviews()
		newCommentContent.value = ''
		loading.value = false
	})
}

//* 获取评论列表
const fetchReviews = () => {
	simpleRequest(Api.getReviewsByProductId, currentProductId, (data) => reviews.value = data.data.map(reviewData => reviewData))

	console.log(reviews.value)
}

//* 挂载时获取商品信息和评论列表
onMounted(() => {

	simpleRequest(Api.getProductById, currentProductId, (data) => product.value = { ...data.data })

	fetchReviews()

})

</script>

<style scoped>

/* 自定义弹幕项的样式 */
.custom-danmaku-item {
	color: #000; /* 黑色文字 */
	background-color: #f0f0f0; /* 灰色背景 */
	padding: 4px 8px; /* 内边距 */
	border-radius: 4px; /* 圆角 */
	font-size: 20px; /* 字体大小 */
	line-height: 1.2; /* 行高 */
	margin-right: 10px; /* 右边距 */
	white-space: nowrap; /* 防止文本换行 */
}

.product-detail-container {
	display: flex;
	justify-content: center;
	align-items: flex-start; /* 让内容顶部对齐 */
	margin-top: 20px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-images {
	width: 40%; /* 调整图片宽度 */
	margin-right: 40px; /* 增加右边距 */
}

.main-image {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center; /* 垂直居中文本 */
	align-items: center; /* 水平居中文本 */
	padding: 40px; /* 增加内边距 */
}

.info-content {
	text-align: center; /* 文本居中 */
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 100%; /* 确保宽度适应父容器 */
}

.info-content h1 {
	font-size: 1.5em;
	margin-bottom: 10px;
}

.info-content p {
	margin: 5px 0;
}

.add-to-cart-btn {
	margin-top: 20px;
	align-self: center; /* 按钮水平居中 */
}

.loading {
	text-align: center;
	margin-top: 50px;
}

/* 新增评论区样式 */
.comments-section {
	margin-top: 40px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 100%;
}

.comments-list {
	list-style-type: none;
	padding: 0;
}

.comment-item {
	padding: 10px 0;
	border-bottom: 1px solid #e0e0e0;
}

.comment-item:last-child {
	border-bottom: none;
}

.comments-section form {
	margin-top: 20px;
}

.comments-section textarea {
	width: 100%;
	height: 100px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}

.comments-section button {
	margin-top: 10px;
}
</style>